<!-- 支付结果页 -->
<template>
	<view class="success-page">
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
        <wlk-navbar title="支付结果" navbarType='0' fontColor="#FFFFFF" :bgColor="themeColor" leftIconColor="#FFFFFF"></wlk-navbar>
        <view class="head" :style="{backgroundColor:themeColor}">
            <view class="wlkflex justify-center result">
                <view class="icon-warp wlkflex justify-center">
                    <u-icon name="checkmark" bold :color="themeColor" size="45"></u-icon>
                </view>
                <view class="head-info">
                    <view class="info-title bold">支付成功！</view>
                    <view class="info-desc">感谢您的支持</view>
                </view>
            </view>
            <view class="fixed-box relative">
                <view class="order" :style="{boxShadow: 'inset 0px 12px 5px -3px '+color+', 0 2px 4px rgba(0,0,0,.06)'}">
                    <view class="price-info">
                        <text>￥</text>
                        <text class="price">{{ order.total_fee || '0.00' }}</text>
                    </view>
                    <view class="order-info pd30">
                        <view class="info-item wlkflex">
                            <view class="item-title">订单编号：</view>
                            <view>{{order.order_sn}}</view>
                        </view>
                        <view class="info-item wlkflex">
                            <view class="item-title">下单时间：</view>
                            <view>{{$u.timeFormat(order.createtime,'yyyy-mm-dd hh:MM:ss')}}</view>
                        </view>
                        <view class="info-item wlkflex">
                            <view class="item-title">支付方式：</view>
                            <view>{{order.pay_type_text}}</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <view class="btn-box wlkflex justify-around">
            <u-button
                    :customStyle="{
                    width:'45%',
			        borderRadius:'8px',
                }"  @click="$Router.pushTab('/pages/index/index')" size="large" text="返回首页"></u-button>
            <u-button v-if="type !== 'recharge' && type !== 'card'"
                    :customStyle="{
                    width:'45%',
			        borderRadius:'8px',
                }" :color="themeColor" @click="$Router.replace('/pages/order/detail?id='+order.id)" size="large" text="订单详情"></u-button>

        </view>
	</view>
</template>

<script>
    import { rgbaToRgb } from '@/wlkutils/tools';
	import { mapGetters } from 'vuex';
    var _self;
    export default {
        computed: {
            ...mapGetters(['themeColor'])
        },
		components: {},
		data() {
			return {
			    status:'',
                order_id:'',
				order: [],
				type: '',
                color:''
			};
		},
		onLoad() {
            _self = this;
            this.status = this.$Route.query.status;
            this.type = this.$Route.query.type;
			this.order_id = this.$Route.query.order_id;
		    this.getData();
            
		},
        onShow(){
            this.color = uni.$u.colorToRgba(rgbaToRgb(this.themeColor), 0.3)
        },
        watch:{
          themeColor(val){
              _self.color = uni.$u.colorToRgba(rgbaToRgb(val), 0.3);
          }  
        },
		methods: {
            async getData() {
                uni.$u.http.post('pay/getorder', {
                    id:_self.order_id,
                    type:_self.type,
                }).then(res => {
                    _self.order = res.data.order;
                }).catch(res => {

                })
            },
		}
	};
</script>

<style lang="scss" >
    page{
        background-color: #FFFFFF!important;
        .head{
            height: 317rpx;
            .result{
                padding-top: 70rpx;
                .icon-warp{
                    width: 120rpx;
                    height: 120rpx;
                    background-color: #FFFFFF;
                    border-radius: 50%;
                    margin-right: 35rpx;
                }
                .head-info{
                    color: #FFFFFF;
                    .info-title{
                        font-size: $font-max;
                    }
                    .info-desc{
                        font-size: $font-lt;
                        margin-top: 5rpx;
                    }
                }
            }

            .fixed-box{
                width: 90%;
                margin: 0 auto;
                height: 20rpx;
                margin-top: 58rpx;
                border-radius: 20rpx;
                background-color: rgba(0,0,0,.1);
                .order{

                    width: 95%;
                    margin: 0 auto;
                    background-color: #FFFFFF;
                    position: absolute;
                    top: 10rpx;
                    left: 2.5%;
                    z-index: 9999;
                    .price-info{
                        font-size:$font-lg;
                        text-align: center;
                        font-weight: bold;
                        border-bottom: 1px dashed #eaebec;
                        margin: 0 10rpx;
                        padding: 40rpx 0;
                        .price{
                            font-size:50rpx;
                        }
                    }
                    .order-info{
                        font-size:$font-base;
                        .info-item{
                            padding: 20rpx 0;
                            .item-title{
                                color: $uni-text-color-grey;
                            }
                        }
                    }
                }
            }
        }
        .btn-box{
            width: 90%;
            margin: 500rpx auto 0 auto;

        }
    }
</style>
